<template>
    <div>
        <!--        我参与的项目-->
        <div class="">
            <div class="crumbs">
                <div @click="gotoProject" style="width: 200px;height: 16px">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 我参与的项目</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </div>
            <div class="container" style="position: relative">
                <el-button style=" position: absolute; right: 70px;z-index: 99" type="primary" icon="el-icon-edit"
                           @click.native="deletepro">{{isdeletepartpro?'确定':'删除项目'}}
                </el-button>
                <el-tabs v-model="mineIndex">
                    <el-tab-pane :label="`进行中(${mine['running'].length})`" name="first">
                        <template v-if="mineIndex === 'first'">
                            <el-row>
                                <el-col :span="4" style="height: 130px" v-for="(o, index) in mine['running']"
                                        :key="o.projectId"
                                        :offset="(index+1) % 5 === 1 ? 0 : 1">
                                    <el-card :body-style="{ padding: '0px' }" :data="mine"
                                             @click.native="gotoProjectOne(o.projectId || 0)"
                                             style="height: 124px; position: relative">
                                        <el-button type="primary" icon="el-icon-delete" v-if="isdeletepartpro"

                                                   @click.prevent.stop="deleteModal(o)"
                                                   style="position: absolute ;right:0px ;padding: 4px 10px;"></el-button>
                                        <div style="padding: 14px;">
                                            <p style="font-size: 14px" align="center">{{o.projectName}}</p>
                                            <el-progress :percentage='o.projectProgress'
                                                         :stroke-width="5"></el-progress>
                                            <div class="bottom clearfix">
                                                <el-button type="text" class="button">
                                                    {{'预计:'+o.startTime+'-'+o.finishTime}}
                                                </el-button>
                                            </div>
                                            <p style="font-size: 12px; padding-top: 10px">{{'甲方：'+o.partyA}}</p>
                                            <p style="font-size: 12px">{{'项目负责人：'+o.projectManager}}</p>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane :label="`已完成(${mine['done'].length})`" name="second">
                        <template v-if="mineIndex === 'second'">
                            <el-row>
                                <el-col :span="4" style="height: 130px" v-for="(o, index) in mine['done']"
                                        :key="o.projectId"
                                        :offset="(index+1) % 5 === 1 ? 0 : 1">
                                    <el-card :body-style="{ padding: '0px' }" :data="mine"
                                             @click.native="gotoProjectOne(o.projectId || 0)"
                                             style="height: 124px; position: relative">
                                        <el-button type="primary" icon="el-icon-delete" v-if="isdeletepartpro"
                                                   @click.prevent.stop="deleteModal(o)"
                                                   style="position: absolute ;right:0 ;padding: 4px 10px;"></el-button>
                                        <div style="padding: 14px;">
                                            <p style="font-size: 14px" align="center">{{o.projectName}}</p>
                                            <el-progress :percentage='o.projectProgress'
                                                         :stroke-width="5"></el-progress>
                                            <div class="bottom clearfix">
                                                <el-button type="text" class="button">
                                                    {{'预计:'+o.startTime+'-'+o.finishTime}}
                                                </el-button>
                                            </div>
                                            <p style="font-size: 12px; padding-top: 10px">{{'甲方：'+o.partyA}}</p>
                                            <p style="font-size: 12px">{{'项目负责人：'+o.projectManager}}</p>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane :label="`未开始(${mine['not'].length})`" name="third">
                        <template v-if="mineIndex === 'third'">
                            <el-row>
                                <el-col :span="4" style="height: 130px" v-for="(o, index) in mine['not']"
                                        :key="o.projectId"
                                        :offset="(index+1) % 5 === 1 ? 0 : 1">
                                    <el-card :body-style="{ padding: '0px' }" :data="mine"
                                             @click.native="gotoProjectOne(o.projectId || 0)"
                                             style="height: 124px; position: relative">
                                        <el-button type="primary" icon="el-icon-delete" v-if="isdeletepartpro"
                                                   @click.prevent.stop="deleteModal(o)"
                                                   style="position: absolute ;right:0px ;padding: 4px 10px;"></el-button>
                                        <div style="padding: 14px;">
                                            <p style="font-size: 14px" align="center">{{o.projectName}}</p>
                                            <el-progress :percentage='o.projectProgress'
                                                         :stroke-width="5"></el-progress>
                                            <div class="bottom clearfix">
                                                <el-button type="text" class="button">
                                                    {{'预计:'+o.startTime+'-'+o.finishTime}}
                                                </el-button>
                                            </div>
                                            <p style="font-size: 12px; padding-top: 10px">{{'甲方：'+o.partyA}}</p>
                                            <p style="font-size: 12px">{{'项目负责人：'+o.projectManager}}</p>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </template>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <!--        我负责的项目-->
        <div class="">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 我负责的项目</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="container" style="position: relative">
                <el-button style="position: absolute; right: 70px" type="primary" icon="el-icon-edit"></el-button>
                <el-tabs v-model="mineResIndex">
                    <el-tab-pane :label="`进行中(${mineRes['running'].length})`" name="first">
                        <template v-if="mineResIndex === 'first'">
                            <el-row>
                                <el-col :span="4" style="height: 130px" v-for="(o, index) in mineRes['running']"
                                        :key="o.projectId"
                                        :offset="(index+1) % 5 === 1 ? 0 : 1">
                                    <el-card :body-style="{ padding: '0px' }" :data="mineRes"
                                             @click.native="gotoProjectOne(o.projectId || 0)" style="height: 124px;">
                                        <div style="padding: 14px;">
                                            <p style="font-size: 14px" align="center">{{o.projectName}}</p>
                                            <el-progress :percentage='o.projectProgress'
                                                         :stroke-width="5"></el-progress>
                                            <div class="bottom clearfix">
                                                <el-button type="text" class="button">
                                                    {{'预计:'+o.startTime+'-'+o.finishTime}}
                                                </el-button>
                                            </div>
                                            <p style="font-size: 12px; padding-top: 10px">{{'甲方：'+o.partyA}}</p>
                                            <p style="font-size: 12px">{{'项目负责人：'+o.projectManager}}</p>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane :label="`已完成(${mineRes['done'].length})`" name="second">
                        <template v-if="mineResIndex === 'second'">
                            <el-row>
                                <el-col :span="4" style="height: 130px" v-for="(o, index) in mineRes['done']"
                                        :key="o.projectId"
                                        :offset="(index+1) % 5 === 1 ? 0 : 1">
                                    <el-card :body-style="{ padding: '0px' }" :data="mineRes"
                                             @click.native="gotoProjectOne(o.projectId || 0)" style="height: 124px;">
                                        <div style="padding: 14px;">
                                            <p style="font-size: 14px" align="center">{{o.projectName}}</p>
                                            <el-progress :percentage='o.projectProgress'
                                                         :stroke-width="5"></el-progress>
                                            <div class="bottom clearfix">
                                                <el-button type="text" class="button">
                                                    {{'预计:'+o.startTime+'-'+o.finishTime}}
                                                </el-button>
                                            </div>
                                            <p style="font-size: 12px; padding-top: 10px">{{'甲方：'+o.partyA}}</p>
                                            <p style="font-size: 12px">{{'项目负责人：'+o.projectManager}}</p>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane :label="`未开始(${mineRes['not'].length})`" name="third">
                        <template v-if="mineResIndex === 'third'">
                            <el-row>
                                <el-col :span="4" style="height: 130px" v-for="(o, index) in mineRes['not']"
                                        :key="o.projectId"
                                        :offset="(index+1) % 5 === 1 ? 0 : 1">
                                    <el-card :body-style="{ padding: '0px' }" :data="mineRes"
                                             @click.native="gotoProjectOne(o.projectId || 0)" style="height: 124px;">
                                        <div style="padding: 14px;">
                                            <p style="font-size: 14px" align="center">{{o.projectName}}</p>
                                            <el-progress :percentage='o.projectProgress'
                                                         :stroke-width="5"></el-progress>
                                            <div class="bottom clearfix">
                                                <el-button type="text" class="button">
                                                    {{'预计:'+o.startTime+'-'+o.finishTime}}
                                                </el-button>
                                            </div>
                                            <p style="font-size: 12px; padding-top: 10px">{{'甲方：'+o.partyA}}</p>
                                            <p style="font-size: 12px">{{'项目负责人：'+o.projectManager}}</p>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </template>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <!--        我的工作项-->
        <div class="">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 我的工作项</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="container" style="position: relative">
                <el-button style="position: absolute; right: 70px" type="primary" icon="el-icon-edit"></el-button>
                <el-tabs v-model="myMissionIndex">
                    <el-tab-pane :label="`需求(${tableData.length})`" name="first">
                        <template v-if="myMissionIndex === 'first'">
                            <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    max-height="250">
                                <el-table-column
                                        fixed
                                        prop="priorityName"
                                        label="优先级"
                                        width="150">
                                </el-table-column>
                                <el-table-column
                                        prop="content"
                                        label="工作项内容"
                                        width="300">
                                </el-table-column>
                                <el-table-column
                                        prop="province"
                                        label="所属项目"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="finishTime"
                                        label="剩余时间"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="finishTime"
                                        label="开始时间"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="finishTime"
                                        label="预计工期"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="工作项类型"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        fixed="right"
                                        label="操作"
                                        width="120">
                                    <template slot-scope="scope">
                                        <el-button
                                                @click.native.prevent="deleteRow(scope.$index, tableData)"
                                                type="text"
                                                size="small">
                                            移除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane :label="`缺陷(${tableData.length})`" name="second">
                        <template v-if="myMissionIndex === 'second'">
                            <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    max-height="250">
                                <el-table-column
                                        fixed
                                        prop="city"
                                        label="优先级"
                                        width="150">
                                </el-table-column>
                                <el-table-column
                                        prop="address"
                                        label="工作项内容"
                                        width="300">
                                </el-table-column>
                                <el-table-column
                                        prop="province"
                                        label="所属项目"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="finishTime"
                                        label="剩余时间"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="finishTime"
                                        label="开始时间"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="finishTime"
                                        label="预计工期"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="工作项类型"
                                        width="120">
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane :label="`任务(${tableData.length})`" name="third">
                        <template v-if="myMissionIndex === 'third'">
                            <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    max-height="250">
                                <el-table-column
                                        fixed
                                        prop="city"
                                        label="优先级"
                                        width="150">
                                </el-table-column>
                                <el-table-column
                                        prop="address"
                                        label="工作项内容"
                                        width="300">
                                </el-table-column>
                                <el-table-column
                                        prop="province"
                                        label="所属项目"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="finishTime"
                                        label="剩余时间"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="finishTime"
                                        label="开始时间"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="finishTime"
                                        label="预计工期"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="工作项类型"
                                        width="120">
                                </el-table-column>


                            </el-table>
                        </template>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <!--        确认删除参与的项目-对话框-->
        <el-dialog
                title="提示"
                :visible.sync="delDialogVisible"
                width="30%">
            <span>是否确定删除该项目？</span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="delDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleDeletePro">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    import { delMission, getMine, getMineRes, getMissionList } from '../../api/dashboard';

    // todo 修改底部我负责的项目的样式：表格表头背景色修改
    export default {
        name: 'tabs',
        data() {
            return {
                delDialogVisible: false,
                isdeletepartpro: false,
                isdeletemainpro: false,
                isdeletework: false,
                mineIndex: 'first',
                mineResIndex: 'first',
                myMissionIndex: 'first',
                showHeader: false,
                tableData: [{
                    finishTime: '加载中...',
                    name: '加载中...',
                    content: '加载中...',
                    priorityName: '*'
                }],
                mineRes: {
                    running: [{
                        projectProgress: 0,
                        finishTime: '*',
                        startTime: '*',
                        projectName: '加载中...',
                        projectManager: '*',
                        partyA: '*'
                    }],
                    done: [],
                    not: []
                },
                mine: {
                    running: [{
                        projectProgress: 0,
                        finishTime: '*',
                        startTime: '*',
                        projectName: '加载中...',
                        projectManager: '*',
                        partyA: '*'
                    }],
                    done: [],
                    not: []
                },
                read: [{
                    finishTime: '2018-04-19 20:00:00',
                    projectName: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
                }, {
                    finishTime: '2018-04-19 20:00:00',
                    projectName: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
                }],
                recycle: [{
                    finishTime: '2018-04-19 20:00:00',
                    projectName: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
                }]
            };
        },
        methods: {
            // 控制删除确认弹框的显示
            deleteModal(o) {
                this.delDialogVisible = !this.delDialogVisible;
                this.delProInfo = o;
            },
            // 发送删除项目请求并修改页面数据
            handleDeletePro() {
                if (this.delProInfo.projectId) {
                    let that = this;
                    require('../../api/dashboard/').delProject({ projectId: this.delProInfo.projectId }).then(res => {
                        if (res.code === 200) {
                            this.delDialogVisible = false;
                            this.$message({
                                message: '删除成功！',
                                type: 'success',
                                duration: 1000,
                                onClose: function() {
                                    that.mine.forEach((item, index) => {
                                        if (that.delProInfo.projectId === item.projectId) {
                                            that.mine.splice(index, 1);
                                        }
                                    });
                                }
                            });
                        }
                    });
                }
            },
            // 切换所有项目面板中的删除按钮的状态
            deletepro() {
                this.isdeletepartpro = !this.isdeletepartpro;
            },
            // 个人工作项删除整行
            deleteRow(index, rows) {
                console.log(rows);
                delMission({ missionId: rows.missionId }).then(res => {
                    this.$message({
                        duration: '1000',
                        title: '删除成功',
                        onClose: rows.splice(index, 1)
                    });
                });
            },
            // 跳转至项目详情
            gotoProject() {
                this.$router.push('/project');
            },
            gotoProjectOne(projectId) {
                // todo 管理全局Vuex状态 表明当前浏览项目主页 跳转时添加projectId；
                if (projectId !== 0) {
                    this.$store.commit('storeCurrProject', {
                        id: projectId
                    });
                    this.$router.push(`./projectone/overview?projectId=${projectId}`);
                } else {
                    this.$message.warning('正在加载...');
                }
            },
            handleRead(index) {
                const item = this.mine.splice(index, 1);
                console.log(item);
                this.read = item.concat(this.read);
            },
            handleDel(index) {
                const item = this.read.splice(index, 1);
                this.recycle = item.concat(this.recycle);
            },
            handleRestore(index) {
                const item = this.recycle.splice(index, 1);
                this.read = item.concat(this.read);
            }
        },
        created() {
            getMine().then(res => {
                /**
                 * @type {{running: [进行中], not: [未开始], done: [已完成]}}
                 */
                let mine = {
                    running: [],
                    done: [],
                    not: []
                };
                res.data.forEach(item => {
                    item.startTime = item.startTime.splice(0, 3).join("-");
                    item.finishTime = item.finishTime.splice(0, 3).join("-");
                    switch (item.projectStatus) {
                        case 0:
                            mine.not.push(item);
                            break;
                        case 1:
                            mine.running.push(item);
                            break;
                        case 2:
                            mine.done.push(item);
                            break;
                    }
                });
                this.mine = mine;
            });
            getMineRes().then(res => {
                /**
                 * @type {{running: [进行中], not: [未开始], done: [已完成]}}
                 */
                let mineRes = {
                    running: [],
                    done: [],
                    not: []
                };
                res.data.forEach(item => {
                    item.startTime = item.startTime.splice(0, 3).join("-");
                    item.finishTime = item.finishTime.splice(0, 3).join("-");
                    switch (item.projectStatus) {
                        case 0:
                            mineRes.not.push(item);
                            break;
                        case 1:
                            mineRes.running.push(item);
                            break;
                        case 2:
                            mineRes.done.push(item);
                            break;
                    }
                });
                this.mineRes = mineRes;
            });
            // todo 等待个人工作项接口
            getMissionList().then(res => {
                res.data.forEach(item => {
                    switch (item.priority) {
                        case '1':
                            item['priorityName'] = '普通';
                            break;
                        case '10':
                            item['priorityName'] = '比较重要';
                            break;
                        case '100':
                            item['priorityName'] = '非常重要';
                            break;
                        default:
                            item['priorityName'] = '普通';
                    }
                });
                this.tableData = res.data;
            });
        }
    };

</script>

<style>
    .el-progress-bar__outer {
        /*width: 200px;*/
    }

    .el-progress__text {
        float: right;
        margin-top: 3px;
        font-size: 12px;
    }

    .message-projectName {
        cursor: pointer;
    }

    .handle-row {
        margin-top: 30px;
    }

    .Frame {
        border-color: #1f2f3d;
        border-width: 2px;

        height: 85px;
        width: 180px;
    }

    .bottom {
        margin-top: 6px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>

